<template>
  <div class="common-layout">
    <el-container direction="vertical">
      <el-header class="header">
        <div class="header-left">酒店管理系统</div>
        <div class="header-right">
          <el-button v-if="!isLoggedIn" type="text" @click="showLoginDialog">管理员登录</el-button>
          <template v-else>
            <el-button type="text" @click="handleLogout">退出登录</el-button>
          </template>
        </div>
      </el-header>

      <el-container class="content-container">
        <!-- 可以选择在这里添加侧边栏 ElAside -->

        <el-main class="main-content">
          <div v-if="isLoggedIn" class="control-area">
            <el-button @click="$router.push({ name: 'roomList' })">房间列表</el-button>
            <el-button @click="$router.push({ name: 'bookingList' })">预订列表</el-button>
            <!-- 这里可以添加其他的控制组件 -->
          </div>
          <router-view />
        </el-main>
      </el-container>
    </el-container>

    <!-- 管理员登录对话框 -->
    <el-dialog v-model="loginDialogVisible" title="管理员登录" width="30%">
      <el-form :model="adminLoginForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="adminLoginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="adminLoginForm.password"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="loginDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAdminLogin">登录</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElDialog, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'
import { useRouter } from 'vue-router'

interface Admin {
  adminID?: number;
  username: string;
  password: string;
}

const loginDialogVisible = ref(false);
const adminLoginForm = reactive<Admin>({
  username: '',
  password: '',
});

const isLoggedIn = ref(false); // 添加登录状态变量

const router = useRouter(); // 获取路由实例

// 检查登录状态的方法 (本地存储版)
const checkLoginStatus = () => {
  const adminFlag = localStorage.getItem('admin');
  isLoggedIn.value = !!adminFlag;
}

const showLoginDialog = () => {
  loginDialogVisible.value = true;
  // 清空表单
  adminLoginForm.username = '';
  adminLoginForm.password = '';
}

const submitAdminLogin = async () => {
  try {
    console.log('开始登录请求，表单数据：', adminLoginForm);
    const response = await fetch('http://127.0.0.1:8080/admin/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(adminLoginForm)
    });

    const result = await response.text();
    console.log('登录响应状态：', response.status, response.statusText);
    console.log('登录响应结果：', result);

    if (response.ok) {
      ElMessage.success(result);
      loginDialogVisible.value = false;
      isLoggedIn.value = true;
      localStorage.setItem('admin', '1'); // 登录成功写入本地存储
    } else {
      ElMessage.error(`登录失败: ${result}`);
      isLoggedIn.value = false;
      localStorage.removeItem('admin');
    }
  } catch (error) {
    console.error('登录请求详细错误：', error);
    ElMessage.error('提交登录请求失败');
    isLoggedIn.value = false;
    localStorage.removeItem('admin');
  }
}

// 处理退出登录
const handleLogout = () => {
  isLoggedIn.value = false;
  localStorage.removeItem('admin'); // 移除本地存储
  ElMessage.success('已退出登录');
  router.push({ path: '/' });
}

// 页面加载时检查登录状态
checkLoginStatus();

</script>

<style scoped>
.common-layout {
  min-height: 100vh;
  width: 100%;
  /* 确保宽度占满 */
  background-color: #f0f2f5;
}

.el-container {
  min-height: 100vh;
  width: 100%;
  /* 确保宽度占满 */
}

.header {
  background-color: #ffffff;
  color: #333;
  line-height: 60px;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-right .el-button.el-button--text {
  font-size: 16px;
  /* 调整字体大小使其看起来更像文本 */
}

.content-container {
  padding: 20px;
  /* 给内容区域添加内边距 */
  /* 如果有侧边栏，这里可以调整布局 */
}

.main-content {
  background-color: #ffffff;
  padding: 20px;
  /* Main 内容区域内边距 */
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  flex-grow: 1;
  /* 让主内容区域填充剩余空间 */
}

.control-area {
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  /* 添加底部边框 */
  margin-bottom: 20px;
  /* 添加底部外边距 */
  display: flex;
  /* 将控制区域的对齐方式改为居中或左对齐，以便容纳多个按钮 */
  justify-content: flex-start;
  align-items: center;
}

.control-area .el-button {
  margin-right: 10px;
  /* 按钮之间添加右边距 */
}

.control-placeholder {
  border: 1px dashed #007bff;
  padding: 10px;
  text-align: center;
  color: #007bff;
  /* 移除占位符的样式或直接移除占位符 */
  display: none;
  /* 暂时隐藏占位符 */
}

/* 对话框 footer 样式 */
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>